<template>
  <!-- 首页-头部栏-消息页面 -->
  <div class="information">
    <!-- 首页-头部导航栏 -->
    <van-nav-bar
      title="消息"
      left-text="返回"
      right-text="清空消息"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <!-- van-pull-refresh 下拉刷新 -->
    <van-pull-refresh success-text="刷新成功" v-model="isLoading" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <!-- 消息选项卡开始 -->
        <van-cell v-for="(item, index) in list" :key="index" >
          <div class="cell" style="height: 70px;" @click="openInformationDetails(item)">
            <div class="head-img">
              <van-image
                round
                width="4rem"
                height="4rem"
                :src="item.notice_img"
              />
            </div>
            <div class="inform">
              <div class="content">
                <span>{{ item.u_nickname }}</span>
                <span>{{ item.notice_content }}</span>
              </div>
              <div class="inform_date" v-if="item.notice_date">
                <span>{{ item.notice_date.substring(5) }}</span>
              </div>
            </div>
          </div>
        </van-cell>
        <!-- 消息选项卡结束 -->
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import {getAppNotice} from "../http/api";
const list = []
export default {
  name: "Information",
  data() {
    return {
      list,
      loading: false,
      finished: false,
      isLoading: false
    }
  },
  methods: {
    openInformationDetails(item) {
      // this.$router.push({
      //   name: 'Information_details',
      //   params: {
      //     u_nickname: item.u_nickname,
      //     notice_content: item.notice_content,
      //     notice_date: item.notice_date ? item.notice_date.substring(5) : ""
      //   }
      // })
    },
    getAppNotice() {
      getAppNotice().then(res => {
        this.list = res.data.data
        console.log(res.data);
      })
    },
    onClickLeft() {
      this.$router.go(-1)
    },
    onClickRight() {
      this.list = []
    },
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        // 加载状态结束
        this.loading = false;
        // 数据全部加载完成
        this.finished = true;
      }, 1000);
    },
    onRefresh() {
      setTimeout(() => {
        this.getAppNotice()
        this.isLoading = false
      }, 1000)
    }
  },
  mounted() {
    this.getAppNotice()
  }
}
</script>

<style scoped>
.cell {
  display: flex;
}
.inform {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 5px 0;
  margin-left: 7px;
}
.content>span:last-child {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.head-img {
  display: inline-block;
}
.inform_date {
  width: 80px;
  text-align: right;
}
</style>
